/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="common-nav__wrap left-nav-wrapper--media">
        <sf-nav-menu :title="title"
                     :options="menuOptions"
                     :menu-width="width"
                     :menu-height="height"
                     :default-active="defaultActive"
                     :unique-opened="true"
                     :route-mode="routeMode"
                     :expand-all="false"
                     @clickItem="_change">
        </sf-nav-menu>
</div>
</template>
<style lang="stylus">
.common-nav__wrap
    flex 0 0 240px
    border-radius 5px
    overflow hidden
    box-shadow 0 0 3px 0 rgba(0,0,0,0.10)
    background #fff
    .sfv-nav-sub-menu_title_icon
        margin-right 10px
    .sfv-nav-menu
        display block
        .sfv-nav-menu_title
            width 100%
            height 47px
            background #fff
            color #223d65
            font-size 16px
            font-weight normal
            line-height 47px
            border-bottom 1px solid #ccc
        .sfv-nav-menu-list-item--active
            background #4D8DD9!important
            color: #fff!important
        .sfv-nav-sub-menu_title, .sfv-nav-menu-list-item
            display flex
            align-items center
            height 45px
            border-bottom 1px solid #dee0e1
            font-size 14px
            &:hover
                background #eef3fb
            .sfv-nav-menu-list-item_icon-wrapper
                width 23px
            .sfv-nav-sub-menu_title_icon-wrapper
                width 23px
            .safety-nav__title--icon
                width 16px
                height 16px
                margin-right 10px
            .sfv-nav-sub-menu_title_toggle-icon-wrapper
                display none
        .sfv-nav-sub-menu_content
            border-bottom 1px solid #dee0e1
            .sfv-nav-menu-list-item
                height 40px
                border-bottom 0
                font-size 13px
                line-height 40px
                &:hover
                    background #eef3fb
            .sfv-nav-menu-list-item--active
                background #4D8DD9!important
                color: #fff!important
</style>
<script lang=ts>

    /**
     * Created by sch
     */

    import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
    import { SfMenuOption } from '@sxf/sf-vue-component'

    @Component
    export default class LeftNav extends Vue{
        @Prop({
            type: String,
            default: ''
        }) title!: string
        @Prop({
            type: String,
            default: ''
        }) active!: string
        @Prop({
            type: Array,
            default: () => []
        }) menuOptions!: SfMenuOption[]
        @Prop({
            type: Boolean,
            default: true
        }) routeMode!: boolean

        defaultActive: string = ''
        get height () {
            return this.$store.state.bodyHeight;
        }
        get width () {
            return this.$store.state.leftNavWidth;
        }
        @Watch('active')
        activeChange (val: string) {
            this.defaultActive = val;
        }

        @Watch('$route', {immediate: true})
        onRouteChange() {
            if (this.routeMode) {
                this.defaultActive = this.active ? this.active : this.$route.path;
            } else {
                this.defaultActive = this.active;
            }
        }

        /**
         * 全局监听menu点击事件
         * @param {Object} e 事件对象
         * @param {Object} vm 组件对象
         * @param {Object} data 对应item的数据对象
         */
         _change (e: Event, vm: Vue, data: SfMenuOption) {
            this.$emit('nav-change', e, vm, data, this);
        }
    };

</script>
